{include file="common/head"/}
<style>
    .layui-breadcrumb > * {
        font-size: 18px;
        font-weight: 300;
    }
</style>
<div style="margin: 15px;" class="fadeInUp animated"  ng-app="hd" ng-controller="ctrl">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>
            <!-- <a href="{:url('list')}"> 素材列表</a> > {$title}  -->
            <span class="layui-breadcrumb">
                <a href="{:url('list')}?pid={$pid}"><i class="layui-icon layui-icon-upload-circle"></i> {$ptitle}</a>
                <a><cite>{$title}</cite></a>
            </span>
        </legend>
    
    </fieldset>
    <div class="layui-tab" lay-filter="filter">
        <ul class="layui-tab-title">
            <li class="layui-this" lay-id="three">图片素材</li>
            <li lay-id="five">视频素材</li>
            <li lay-id="two">文件素材</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show"> <!-- 图片 -->
                <fieldset class="layui-elem-field">
                    <legend>添加图片</legend>
                    <div class="layui-field-box">
                        <div class="layui-upload">
                            <button type="button" class="layui-btn layui-btn-normal" id="testList"><i class="layui-icon layui-icon-picture"></i>选择多文件</button>
                            <button type="button" class="layui-btn" id="testListAction"><i class="layui-icon"></i>开始上传</button>
                            <div class="layui-upload-list">
                                <table class="layui-table">
                                    <thead>
                                    <tr><th>文件名</th>
                                        <th>大小</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr></thead>
                                    <tbody id="demoList"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </div>

            <div class="layui-tab-item"> <!-- 视频 -->
                <fieldset class="layui-elem-field">
                    <legend>视频素材</legend>
                    <div class="layui-field-box">
                        <div class="layui-upload">
                            <button type="button" class="layui-btn" id="video"><i class="layui-icon"></i>上传视频 （限制20MB 以内）</button>
                            <div class="layui-upload-list" id="video_box">
                                {if $video}
                                <video height="300"  controls="controls" autobuffer="autobuffer" loop="loop">
                                    <source src="{$video.url}" type="video/mp4"></source>
                                </video>
                                {/if}
                            </div>
                        </div>
                    </div>
                </fieldset>
            </div>

            <div class="layui-tab-item"> <!-- 文件 -->
                <fieldset class="layui-elem-field"> 
                    <legend>word/ pdf/ excel 等文件</legend>
                    <div class="layui-field-box">
                        <div class="layui-upload">
                            <button type="button" class="layui-btn layui-btn-normal" id="fileList"><i class="layui-icon layui-icon-picture"></i>选择多文件</button>
                            <button type="button" class="layui-btn" id="fileListAction"><i class="layui-icon"></i>开始上传</button>
                            <div class="layui-upload-list">
                                <table class="layui-table">
                                    <thead>
                                        <tr>
                                            <th>文件名</th>
                                            <th>大小</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="fileListView"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
</div>
{include file="common/foot"/}
<script src="/static/common/js/angular.min.js"></script>
<script src="/static/common/js/jquery.2.1.1.min.js"></script>
<script>
    var m = angular.module('hd',[]);
    var pid = {$pid};
    m.controller('ctrl',['$scope',function($scope) {
        $scope.field = '{$info|raw}'!='null'?{$info|raw}:{id:'',title:'',sort:50,pic:''};
        
        layui.use(['form', 'layer','upload','laydate','element','table'], function () {
            var form = layui.form, $ = layui.jquery, upload = layui.upload,laydate = layui.laydate, element = layui.element, table = layui.table;

            // 图片删除
            $("body").on('click','.base-pic-delete',function () {
                var id = $(this).data('imgid');
                var obj = $(this);
                var loading = layer.load(1, {shade: [0.1, '#fff']});
                $.post("delImg", {id:id}, function (res) {
                    layer.close(loading);
                    if (res.code > 0) {
                        obj.parent().parent().remove();
                        layer.msg(res.msg, {time: 1800, icon: 1});
                    } else {
                        layer.msg(res.msg, {time: 1800, icon: 2});
                    }
                });
            });

            //视频上传
            upload.render({
                elem: '#video'
                ,url: '' //上传接口
                ,accept: 'video' //视频
                ,size: 20*1024 //单位 KB
                ,before: function(obj){
                    this.url = '{:url("material/uploads")}?pid=' + pid + "&type=5"
                }
                ,done: function(res){
                    if (res.code == 0) {
                        layer.msg('上传成功');
                        $("#video_box").empty();
                            sourceDom = $('<video id="videoid" height="300" controls="controls" autoplay="autoplay"><source src="'+ res.file +'"></video>');
                        $("#video_box").append(sourceDom);
                        $("#video_box").show();
                        // 自动播放
                        $("#video_box video")[0].play()
                    }
                    else{
                        layer.msg('上传失败');
                        console.log(res)
                    }
                }
            });

            //多文件列表示例 -- 图片
            var demoListView = $('#demoList')
                ,uploadListIns = upload.render({
                elem: '#testList'
                ,url: ''
                ,accept: 'images'
                ,multiple: true
                ,auto: false
                ,bindAction: '#testListAction'
                ,before: function(obj){
                    this.url = '{:url("material/uploads")}?pid=' + pid + "&type=3"
                },choose: function(obj){
                    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    //读取本地文件
                    obj.preview(function(index, file, result){
                        var tr = $(['<tr id="upload-'+ index +'">'
                            ,'<td><img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img"><br />' + file.name +'</td>'
                            ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
                            ,'<td>等待上传</td>'
                            ,'<td>'
                            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                            ,'</td>'
                            ,'</tr>'].join(''));

                        //单个重传
                        tr.find('.demo-reload').on('click', function(){
                            obj.upload(index, file);
                        });

                        //删除
                        tr.find('.demo-delete').on('click', function(){
                            delete files[index]; //删除对应的文件
                            tr.remove();
                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        });

                        demoListView.append(tr);
                    });
                }
                ,done: function(res, index, upload){
                    if(res.file){ //上传成功
                        var tr = demoListView.find('tr#upload-'+ index)
                            ,tds = tr.children();
                        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                        tds.eq(3).html(''); //清空操作
                        // var str = '<tr><td><img src="'+res.file+'"></td><td><button class="layui-btn layui-btn-xs layui-btn-danger base-pic-delete" data-imgid="'+res.id+'">删除</button></td></tr>';
                        // $("#two_tbody").append(str);
                        return delete this.files[index]; //删除文件队列已经上传成功的文件
                    }
                    this.error(index, upload);
                }
                ,error: function(index, upload){
                    var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                }
            });

            //多文件列表示例 -- 文件
            var fileListView = $('#fileListView')
                , fileUploadListIns = upload.render({
                    elem: '#fileList'
                    , url: ''
                    , accept: 'file'
                    , multiple: true
                    , auto: false
                    , bindAction: '#fileListAction'
                    , before: function (obj) {
                        this.url = '{:url("material/uploads")}?pid=' + pid + "&type=2"
                    }, choose: function (obj) {
                        var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                        //读取本地文件
                        obj.preview(function (index, file, result) {
                            var tr = $(['<tr id="upload-' + index + '">'
                                , '<td>' + file.name + '</td>'
                                , '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>'
                                , '<td>等待上传</td>'
                                , '<td>'
                                , '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                                , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                                , '</td>'
                                , '</tr>'].join(''));

                            //单个重传
                            tr.find('.demo-reload').on('click', function () {
                                obj.upload(index, file);
                            });

                            //删除
                            tr.find('.demo-delete').on('click', function () {
                                delete files[index]; //删除对应的文件
                                tr.remove();
                                fileUploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                            });

                            fileListView.append(tr);
                        });
                    }
                    , done: function (res, index, upload) {
                        if (res.file) { //上传成功
                            var tr = fileListView.find('tr#upload-' + index)
                                , tds = tr.children();
                            tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                            tds.eq(3).html(''); //清空操作
                            // var str = '<tr><td><img src="'+res.file+'"></td><td><button class="layui-btn layui-btn-xs layui-btn-danger base-pic-delete" data-imgid="'+res.id+'">删除</button></td></tr>';
                            // $("#two_tbody").append(str);
                            return delete this.files[index]; //删除文件队列已经上传成功的文件
                        }
                        this.error(index, upload);
                    }
                    , error: function (index, upload) {
                        var tr = fileListView.find('tr#upload-' + index)
                            , tds = tr.children();
                        tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                        tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                    }
                });
        });
    }]);
</script>